<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>微信跟进</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 筛选查询 -->
        <el-card>
            <el-form :inline="true" :model="queryData" class="user-search">
                <el-date-picker
                    v-model="queryData.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>

                <el-select v-model="queryData.deptId" filterable placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.deptId"
                        :label="item.deptName"
                        :value="item.deptId">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="">查询</el-button>
            </el-form>
        </el-card>


        <el-card>
            <div class="ziKuang">
                <div class="zi">
                    <div v-for="(item, index) in tabArray" :key="index" :class="tab == item.value ? 'blue' : ''"
                         @click="tabs(item.value)">{{ item.label }}
                    </div>
                </div>
            </div>

            <!-- 图表 -->
            <div style="height:370px" ref="SCEchart"></div>
            <!--列表-->
            <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                      element-loading-text="拼命加载中" style="width: 100%;">
                <el-table-column prop="userId" v-if="false">
                </el-table-column>
                <el-table-column prop="deptId" v-if="false">
                </el-table-column>
                <el-table-column prop="empId" label="销售单元" width="150" fixed>
                </el-table-column>
                <el-table-column sortable prop="quit" label="发起申请数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="新增好友" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="被删除" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="回复比" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="平均回复时长" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="删除好友" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="超时回复" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="敏感词" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="撤回消息" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="发消息" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="收消息" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="跟进好友-新" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="总跟进好友" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="总有效沟通" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="总有效沟通率" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="有效沟通率-新" width="150">
                </el-table-column>
                <el-table-column align="center" label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detail(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-card>

        <!-- 详情 -->
        <el-dialog :title="detailData.groupName" :visible.sync="formVisible" width="1500px" @click="close">
            <wxDetail :userId="data.userId" :empId="data.empId" :deptId="data.deptId"></wxDetail>
        </el-dialog>
    </div>
</template>

<script>
    import wxDetail from '@/views/security/wxFollowUp/detail'

    import * as Chart from 'echarts'

    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;

    const tabArray = [
        {label: "发起申请数", value: "new_apply_cnt"},
        {label: "新增客户数", value: "new_contact_cnt"},
        {label: "聊天总数", value: "chat_cnt"},
        {label: "发送消息数", value: "message_cnt"},
        {label: "已回复聊天占比", value: "reply_percentage"},
        {label: "平均首次回复时长", value: "avg_reply_time"},
        {label: "删除/拉黑成员的客户数", value: "negative_feedback_cnt"},
    ]

    export default {
        data() {
            return {
                // 搜索框
                queryData: {
                    time: [],
                    deptId: ''
                },
                // 图表
                SCEoption: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: "{a} <br/>{b}月 : {c}"
                    },
                    legend: {
                        data: [{
                            name: '',
                            icon: 'rect'
                        }],
                        top: 1,
                        left: 1,
                        itemGap: 10,
                        itemWidth: 12,
                        itemHeight: 12,
                        textStyle: {
                            fontSize: 12,
                            color: "#323232"
                        }
                    },
                    grid: {
                        left: 50,
                        right: 10,
                        top: 30,
                        bottom: 30,
                        borderWidth: 1
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            height: 70,
                            interval: 0,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        barGap: 0,
                        data: [],
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new Chart.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new Chart.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        }
                    }]
                },
                // 部门下拉
                options: [],
                // 字段下拉框值
                value1: '',
                tabArray: [...tabArray],
                // 图表
                tab: 'new_apply_cnt',

                // 列表数据
                listData: [],
                // 列表加载
                loading: false,
                // 详情页开关
                formVisible: false,
                wxData: [],
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                // 详情数据
                detailData: {
                    groupName: '',
                },
                // 详情数据
                data: {
                    userId: '',
                    deptId: '',
                    empId: '',
                },
            }
        },
        mounted() {
            this.getDeptList()
        },


        methods: {
            // 部门列表下拉框
            getDeptList() {
                let that = this;
                this.$request("/api/emp/getDeptList/1_0", {}, "POST").then((data) => {
                    that.options = data.rows
                    that.queryData.deptId = data.rows[0].deptId;
                })
            },
            // 图表
            getSCE() {
                let startTime = this.queryData.time[0];
                let endTime = this.queryData.time[1];
                let field = this.tab;
                let deptId = this.queryData.deptId;

                let that = this;
                this.$request("/api/wxFollowUp/getChats/1_0", {
                    startTime,
                    endTime,
                    field,
                    deptId
                }, "POST").then((data) => {
                    that.wxData = data.data
                    that.getChartData(that.tab)
                })
            },
            // 图表切换字段
            getChartData(field) {
                field = "" == field ? this.tab : field;
                let data = this.wxData
                let xData = []
                let yData = []
                let that = this
                data.map((item) => {
                    xData.push(that.$moment(item['stat_time']).format("YYYY-MM-DD"))
                    yData.push(item[field])
                })
                this.SCEoption.xAxis.data = xData
                this.SCEoption.series[0].data = yData

                this.chart = Chart.init(this.$refs.SCEchart)
                this.chart.setOption(this.SCEoption)
            },

            // 点击字段切换图表数据
            tabs(value) {
                this.tab = value;
                this.getChartData(value)
            },
            // 下拉框切换字段
            focus() {
                this.tab = this.value1;
                this.getChartData(value)
            },

            // 列表
            getdata() {
                let startTime = this.queryData.time[0];
                let endTime = this.queryData.time[1];
                let deptId = this.queryData.deptId == "" ? "1" : this.queryData.deptId;

                let that = this;
                this.$request("/api/wxFollowUp/getList/1_0", {startTime, endTime, deptId}, "POST").then((data) => {
                    that.listData = data.data
                })
                this.loading = true
                this.listData = [{"empId": "张三", "userId": "123", "deptId": "456",}];
                this.loading = false
            },

            // 查询
            search() {
                this.getdata(this.formInline)
            },
            // 展示详情
            detail(row) {
                this.detailData.groupName = row.empId;

                this.data.userId = row.userId;
                this.data.deptId = row.deptId;
                this.data.empId = row.empId;
                this.formVisible = true;
            },
            // 关闭详情
            close() {
                this.formVisible = false;
            },

            setTime() {
                const nowD = new Date()
                nowD.setTime(nowD.getTime() - 7 * 3600 * 1000 * 24)
                this.queryData.time[0] = nowD
                this.queryData.time[1] = new Date()
            },
            // 分页方法
            queryDataHandle(page = 1, row = 10) {
                let payload = {
                    pageNum: page,
                    pageSize: row
                }
                let that = this;
                that.$request("xxx", payload, "POST").then((data) => {
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
        },

        // 注册组件
        components: {
            wxDetail
        },
        /**
         * 创建完毕
         */
        created() {
            this.setTime(),
                this.getDeptList(),
                this.getdata()
            // this.getChartData(),
            // this.getChartData()
        },
    }
</script>

<style scoped>
    .el-card {
        margin-top: 15px;
    }

    /deep/ .el-card__body {
        padding: 10px 12px;
    }

    .ziKuang {
        display: flex;
        justify-content: space-between;
    }

    .zi {
        display: flex;
        justify-content: center;
        flex: 7;
        margin-top: 9px;
    }

    .ziKuang > div:nth-child(2) {
        flex: 1;
    }

    .zi div {
        padding: 3px 10px;
        border-radius: 20px;
    }

    .blue {
        background: rgb(52, 112, 255);
        color: #fff;
    }
</style>
